<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover动画登录页</title>
    <link rel="stylesheet" href="../less/1.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="container">
        <h1>表单</h1>
        <form action="">
            <input type="text" class="tbx" placeholder="账号">
            <input type="password" class="tbx" placeholder="密码">
            <input type="submit" class="sub" value="登录">
        </form>
    </div>
    <script>
        const con = document.querySelector('.container');

        let isIn = true;      // 鼠标进去的门
        let isOut = false;    // 鼠标出去的门
        let span;           // 生成的新元素
        con.addEventListener("mouseenter", function (event) {
            if (isIn) {
                // 获取进入的鼠标位置
                // 生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
                let inX = event.clientX - event.target.offsetLeft
                let inY = event.clientY - event.target.offsetTop

                // 创造新元素并添加鼠标进入位置
                let spanEl = document.createElement('span')
                spanEl.style.left = inX + 'px'
                spanEl.style.top = inY + 'px'

                con.append(spanEl)

                $('.container span').removeClass('out')
                $('.container span').addClass('in')
                //节点赋值给span，后面要用
                span=document.querySelector('.container span')
                isIn=false;
                isOut=true
            }
        })
        con.addEventListener("mouseleave", function (event) {
            if (isOut) {
                let outX = event.clientX - event.target.offsetLeft
                let outY = event.clientY - event.target.offsetTop


                $('.container span').removeClass('in')
                $('.container span').addClass('out')
                // 把移出位置传给out
                $('.out').css('left',outX+'px')
                $('.out').css('top',outY+'px')
                // 这个关门必须写在定时器外面
                //不然500ms(动画持续时间)内，会多次触发函数
                isOut=false
                setTimeout(()=>{
                    span.remove()
                    isIn=true;
                },500)
            }
        })
    </script>
</body>

</html>